<template>
  <div id="container">
		<div class="columns side-menu">
			<div class="dashbord text-center">
				<a href="/"><img src="./assets/img/logo1.png" alt="logo" /></a>
			</div>
			<ul class="menu-list">
			  <li class="menu-li" v-for="item in menuList">
			  	<span class="glyphicon glyphicon-tags"></span>{{item.title}}
			  	<ul class="menuSub">
			  		<li v-for="itemsub in item.list">
			  			<a class="collapsed accordion-toggle" data-toggle="collapse" v-bind:href="'#list' + itemsub.id">{{itemsub.subtitle}}<span class="caret"></span></a>
					    <ul class="collapse showdetial" v-bind:id="'list' + itemsub.id">
								<li v-for="itemsubb in itemsub.linklist">
									<router-link v-bind:to="itemsubb.linksrc">{{itemsubb.linkname}}</router-link>
								</li>
							</ul>
			  		</li>
			  	</ul>
			  </li>
			</ul>
		</div>
		<div class="columns side-main">
			<router-view v-bind:message="parentMsg"></router-view>
    	<footercontent></footercontent>
		</div>
  </div>
</template>
<script>
	import './assets/css/base.css'
	import footercontent from './components/common/footer.vue'
	var menuList = [
    {
      "title":"js",
      "list":[
        {
          "subtitle":"JavaScript1",
          "id":1,
          "linklist":[
            {
              "linkname":"test1",
              "linksrc":"test1.html",
            },
            {
              "linkname":"test2",
              "linksrc":"test2.html",
            },
             {
              "linkname":"test3",
              "linksrc":"test3.html",
            },
          ]
        },
        {
          "subtitle":"bootstrap",
          "id":2,
          "linklist":[
            {
              "linkname":"TableScroll",
              "linksrc":"/tableScroll",
            },
            {
              "linkname":"test8",
              "linksrc":"test8.html",
            },
             {
              "linkname":"test9",
              "linksrc":"test9.html",
            },
          ]
        },
        {
          "subtitle":"自己写的js",
          "id":3,
          "linklist":[
            {
              "linkname":"图片上传",
              "linksrc":"/selfUploadImg",
            },
            {
              "linkname":"test12",
              "linksrc":"test12.html",
            },
             {
              "linkname":"test13",
              "linksrc":"test13.html",
            },
          ]
        },
      ]
    },
    {
      "title":"html",
      "list":[
        {
          "subtitle":"JavaScript4",
          "id":4,
          "linklist":[
            {
              "linkname":"test14",
              "linksrc":"test14.html",
            },
            {
              "linkname":"test15",
              "linksrc":"test15.html",
            },
             {
              "linkname":"test16",
              "linksrc":"test16.html",
            },
          ]
        },
        {
          "subtitle":"JavaScript5",
          "id":5,
          "linklist":[
            {
              "linkname":"test17",
              "linksrc":"test17.html",
            },
            {
              "linkname":"test18",
              "linksrc":"test18.html",
            },
             {
              "linkname":"test19",
              "linksrc":"test19.html",
            },
          ]
        },
        {
          "subtitle":"JavaScript4",
          "id":6,
          "linklist":[
            {
              "linkname":"test20",
              "linksrc":"test20.html",
            },
            {
              "linkname":"test21",
              "linksrc":"test21.html",
            },
             {
              "linkname":"test22",
              "linksrc":"test22.html",
            },
          ]
        },
      ]
    },
    {
      "title":"css",
      "list":[
        {
          "subtitle":"JavaScript5",
          "id":7,
          "linklist":[
            {
              "linkname":"test23",
              "linksrc":"test23.html",
            },
            {
              "linkname":"test24",
              "linksrc":"test24.html",
            },
             {
              "linkname":"test25",
              "linksrc":"test25.html",
            },
          ]
        },
        {
          "subtitle":"JavaScript6",
          "id":8,
          "linklist":[
            {
              "linkname":"test26",
              "linksrc":"test26.html",
            },
            {
              "linkname":"test27",
              "linksrc":"test27.html",
            },
             {
              "linkname":"test28",
              "linksrc":"test28.html",
            },
          ]
        },
        {
          "subtitle":"JavaScript7",
          "id":9,
          "linklist":[
            {
              "linkname":"test29",
              "linksrc":"test29.html",
            },
            {
              "linkname":"test30",
              "linksrc":"test30.html",
            },
             {
              "linkname":"test31",
              "linksrc":"test31.html",
            },
          ]
        },
      ]
    },{
      "title":"综合",
      "list":[
        {
          "subtitle":"公司写的活动页面",
          "id":10,
          "linklist":[
            {
              "linkname":"20160311",
              "linksrc":"/activity/20160311",
            },
            {
              "linkname":"test24",
              "linksrc":"test24.html",
            },
             {
              "linkname":"test25",
              "linksrc":"test25.html",
            },
          ]
        }
      ]
    },
  ]
  export default {
    name: 'index',
    components:{footercontent},
    data() {
			return {
				menuList: menuList,
				parentMsg:"lihongye 123336"
			}
		},
    methods:{
    	init:function(){
    		/*左侧当前菜单打开时其他菜单合上*/
    		$(document).on("click",".accordion-toggle",function(){
    			var thisCollapse = $(this).closest(".collapse");
    			$(".menu-list .collapse").not(thisCollapse).collapse('hide');
    		});
    		
    		/*菜单当前页状态*/
    		$(".router-link-active").parents(".showdetial").addClass("in").closest(".accordion-toggle").removeClass("collapsed");
    	},
    },
    mounted() {
			this.init();
		}
  }
</script>
